<template>
	<div class="store-list-wrap">
		<div class="top-fix">
			<div class="search-box">
				<img @click="handleToBack" class="search-left-arrow" :src="searchLeftArrow" alt="">

				<div class="search-input">
					<van-search v-model="searchValue" placeholder="请输入商家名称或者分类" @search="onSearch"
						:left-icon="searchHistoryIcon">
					</van-search>

					<div class="search-btn active-btn" @click="handleToSearch">搜索</div>
				</div>
			</div>

			<div class="tab-ul">
				<div @click="handleToTag('distance')" :class="['tab-li', distance ? 'on' : '']">附近1km</div>
				<div @click="handleToTag('new_store')" :class="['tab-li', new_store ? 'on' : '']">新店</div>
				<div @click="handleToTag('recommend')" :class="['tab-li', recommend ? 'on' : '']">平台推荐</div>
				<div :class="['tab-li', public_status ? 'on' : '']" @click="handleToTag('public_status')">公排补贴</div>
				<!-- @click="handleToTag('public_status')" -->
			</div>
		</div>

		<van-list v-model="loadingPage" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
			@load="ajaxGoodList">
			<div v-if="finished && !list.length" class="empty-good">
				<van-empty description="暂无店铺" />
			</div>

			<!-- 商品列表 -->
			<div class="good-ul">
				<storeGoodItem v-for="(item, index) in list" :key="index" :item="item" @storeInfo="storeInfo">
				</storeGoodItem>
			</div>
		</van-list>
	</div>
</template>

<script>
import { searchLeftArrow, searchHistoryIcon, sortDefault, sortDown, sortUp } from '@/tool/static-img';
import storeGoodItem from './components/store-good-item';
import { STORE_LIST } from '@/api/store';
export default {
	components: {
		storeGoodItem
	},
	data() {
		return {
			searchLeftArrow, searchHistoryIcon,
			sortDefault, sortDown, sortUp,
			searchValue: localStorage.getItem('searchKey') || '',
			cate_id: this.$route.query.cate_id,
			current: 0,
			cate_id: this.$route.query.cate_id,
			sortStatus: 'default',
			localStorageHistory: [],

			// 是否
			distance: false,
			new_store: false,
			recommend: false,
			public_status: false,

			// 分页
			page: 1,
			pageSize: 20,
			list: [],
			loadingPage: false,
			finished: false,
		}
	},
	created() {
		// 本地历史记录
		let searchHistory = localStorage.getItem('searchHistory');
		if (searchHistory) {
			this.localStorageHistory = JSON.parse(searchHistory);
		} else {
			this.localStorageHistory = [];
		}

	},
	methods: {
		handleToBack() {
			localStorage.removeItem('searchKey');
			this.$router.back()
		},
		onSearch(val) {

			if (!val.trim()) {
				this.resetInit();
				return;
			}

			// 去重
			this.localStorageHistory = this.localStorageHistory.filter(item => {
				return item != val;
			})


			this.localStorageHistory.unshift(val);
			this.localStorageHistory = this.localStorageHistory.slice(0, 20);

			localStorage.setItem('searchHistory', JSON.stringify(this.localStorageHistory));

			this.resetInit();
		},
		// 去搜索
		handleToSearch() {

			this.onSearch(this.searchValue);
		},
		// 切换tab
		handleToTag(tag) {
			this[tag] = !this[tag];
			this.resetInit();
		},
		resetInit() { //重置
			this.page = 1;
			this.list = [];
			this.finished = false;

			this.loadingPage = true;
			this.ajaxGoodList()
		},
		// 进店铺
		storeInfo(id) {
			const latAndLng = localStorage.getItem('latAndLng');

			this.$router.push({
				name: 'storeInfo',
				query: {
					id,
					longitude: latAndLng ? latAndLng.split(',')[1] : '',
					latitude: latAndLng ? latAndLng.split(',')[0] : '',
				}
			})
		},
		// 列表请求
		ajaxGoodList() {
			const latAndLng = localStorage.getItem('latAndLng');

			let params = {};
			params['page_num'] = this.page;
			params['page_size'] = this.pageSize;
			if(this.distance) {
			    params['distance'] = 1000;
			}
			
			if (this.cate_id) {
				params['cate_id'] = this.cate_id;
			}

			params['new_store'] = this.new_store ? 1 : 0;
			params['recommend'] = this.recommend ? 1 : 0;
			params['public_status'] = this.public_status ? 1 : 0;

			params['longitude'] = latAndLng ? latAndLng.split(',')[1] : '';
			params['latitude'] = latAndLng ? latAndLng.split(',')[0] : '';
			if (this.searchValue && this.searchValue.trim()) {
				params['keyword'] = this.searchValue.trim();
			}

			const locationType = localStorage.getItem('locationType');
			const locationRegionCode = localStorage.getItem('locationRegionCode');

			if (locationType) {
				params['type'] = parseInt(locationType);
			}

			if (locationRegionCode) {
				params['region_code'] = locationRegionCode;
			}
			this.$http.post(STORE_LIST, params)
				.then(res => {
					const {
						list
					} = res.data;

					if (list && list.length) {
						this.page++;
						this.list = this.list.concat(list);
						// 加载状态结束
						this.loadingPage = false;
						if (list.length < this.pageSize) {
							this.finished = true;
						}
					} else {
						this.finished = true;
					}
				}).catch(error => {
					console.error('获取门店列表失败:', error);
					this.loadingPage = false;
					this.finished = true;
				})
		}
	}


}
</script>

<style lang="scss">
.store-list-wrap {
	position: relative;
	min-height: 100vh;
	padding-top: 1.8rem;
	background-color: #f5f5f5;
	padding-bottom: calc(0.2rem + constant(safe-area-inset-bottom));
	padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
	box-sizing: border-box;

	.top-fix {
		position: fixed;
		top: 0;
		width: 100%;
		height: 1.8rem;
		background-color: #fff;
		z-index: 1;
	}

	.search-box {
		display: flex;
		align-items: center;
		width: 100%;
		height: 0.88rem;

		.van-icon-clear {
			display: block;
			padding-bottom: 4px;
		}

		.search-left-arrow {
			width: 0.4rem;
			height: 0.4rem;
			padding: 0.24rem 0 0.24rem 0.32rem;
		}

		.search-input {
			position: relative;
			width: 6.22rem;
			margin-left: 0.24rem;

			.search-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 0.28rem;
				font-weight: 400;
				color: #fff;
				position: absolute;
				right: 0.06rem;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 1.12rem;
				height: 0.52rem;
				border-radius: 0.3rem;
				// background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
				background: linear-gradient(90deg, #75BE70 0%, #56AE48 100%);
			}

			.van-search {
				padding: 0;
				background-color: #f4f4f4;
				border-radius: 0.32rem;

				.van-search__content {
					background-color: #f4f4f4;
					border-radius: 0.32rem;

					.van-cell {
						align-items: center;
						padding: 3px 3px 3px 0;
					}
				}

				.van-field__control {
					height: 26px;
					width: 3.6rem;
					line-height: 26px;
					font-weight: 400;
					font-size: 0.28rem;
				}

				.van-icon {
					height: 20px;
				}

				.van-icon__image {
					width: 20px;
					height: 20px;
				}
			}
		}
	}

	.tab-ul {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 0.92rem;

		.tab-li {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 0.48rem;
			padding: 0 0.32rem;
			font-weight: 400;
			font-size: 0.24rem;
			color: #666666;
			border-radius: 0.24rem;
			border: 0.02rem solid #F2F4F5;
			background: #F2F4F5;
			box-sizing: border-box;

			&.on {
				background: rgba(49, 166, 83, 0.1);
				color: #31A653;
				border-color: #31A653;
			}
		}
	}

	.empty-good {
		padding-top: 1rem;
	}

	.good-ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0.24rem 0.24rem 0;

	}

}
</style>